Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] Add React 19 as peer dependency #43216

Merged
merged 2 commits into from
Aug 16, 2024

Conversation

aarongarciah
Copy link
Member

@aarongarciah aarongarciah commented Aug 7, 2024

Includes v19 in React peer dependencies definitions.

How to test?

  1. Clone this repo: https://github.com/aarongarciah/material-ui-react-19 (it points to v19 React deps and points Material UI deps to the CodeSandbox CI version of the library generated in this PR)
  2. Install dependencies: npm i
  3. Start dev server: npm start
  4. Build: npm run build
  5. Check that there's not TypeScript errors.

Follow the same steps with other package managers like pnpm and yarn.


Findings:

  • Installing dependencies using npm (teted in Node v18 and v20) results in an error with an @emotion/react peer dep. To overcome the error, you need to use the --force flag (--legacy-peer-deps doesn't work).
    Screenshot 2024-08-07 at 14 14 16
  • pnpm and yarn (v1) seem to work well
  • No TypeScript errors reported.

@aarongarciah aarongarciah added the dependencies Update of dependencies label Aug 7, 2024
@aarongarciah aarongarciah marked this pull request as draft August 7, 2024 10:42
@aarongarciah aarongarciah changed the title Add React 19 as peer dependency [core] Add React 19 as peer dependency Aug 7, 2024
@aarongarciah aarongarciah self-assigned this Aug 7, 2024
@aarongarciah aarongarciah added the core Infrastructure work going on behind the scenes label Aug 7, 2024
@mui-bot
Copy link

mui-bot commented Aug 7, 2024

Netlify deploy preview

https://deploy-preview-43216--material-ui.netlify.app/

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 2a23681

@aarongarciah
Copy link
Member Author

aarongarciah commented Aug 7, 2024

edit: I removed the peer dependency from Joy UI and Base UI.


@mnajdova @DiegoAndai I need to test more components/hooks to see if users can run into TypeScript errors while using React 19. Since we still haven't merged type updates required for React 19 (we can't merge them until they're stable), there's a change some users import some component with incompatible types.

Not so many TS changes are required in the React PR. I'll review them to see if some public types (the ones we ship in .d.ts files) can break consumers' apps.

Base UI Joy UI Material UI
Screenshot 2024-08-07 at 21 25 54 Screenshot 2024-08-07 at 21 26 16 Screenshot 2024-08-07 at 21 26 26

@aarongarciah
Copy link
Member Author

aarongarciah commented Aug 7, 2024

BTW, not sure we should be updating Base UI peer deps anymore. Thoughts?

@DiegoAndai
Copy link
Member

not sure we should be updating Base UI peer deps anymore.

I agree we shouldn't, we could skip Joy as well IMO 🤔

@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 8, 2024
@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Aug 8, 2024
@aarongarciah
Copy link
Member Author

Hey @Janpot, do you know if there's a way to circumvent the error described in this PR description while installing dependencies with npm apart from using npm i --force?

@Janpot
Copy link
Member

Janpot commented Aug 12, 2024

Doesn't look like npm accepts prerelease versions as a valid version in the peer dependency range. Interestingly, looks like pnpm and yarn do accept it. You can verify the versions npm accepts here https://semver.npmjs.com/

I guess the only way (apart from forcing it) will be to wait for a stable release.

@aarongarciah
Copy link
Member Author

aarongarciah commented Aug 12, 2024

Weird that >= 19.0.0-rc-0 lists all v19 RC releases in https://semver.npmjs.com but ^17.0.0 || ^18.0.0 || >= 19.0.0-rc-0 doesn't. I'll test by pushing another commit to generate a new version using the range syntax.

@Janpot
Copy link
Member

Janpot commented Aug 12, 2024

I'll test by pushing another commit to generate a new version using the range syntax.

🤔 It seemed to me that the problem was that it doesn't satisfies emotion peer dependency range. I don't think we can fix that in our packages.

@aarongarciah
Copy link
Member Author

aarongarciah commented Aug 12, 2024

Just tested with a @mui/material version using "react": "^17.0.0 || ^18.0.0 || >= 19.0.0-rc-0" and it didn't work with npm i.

I'm testing all possible range syntaxes and I don't quite understand how npm resolves ranges: ^17.0.0 || ^19.0.0-rc lists all rc releases but ^18.0.0 || ^19.0.0-rc or ^17.0.0 || ^18.0.0 || ^19.0.0-rc doesn't.

@aarongarciah
Copy link
Member Author

🤔 It seemed to me that the problem was that it doesn't satisfies emotion peer dependency range. I don't think we can fix that in our packages.

My thinking is other dependencies depending on @mui/material will hit the same issue we're seeing with emotion.

@Janpot
Copy link
Member

Janpot commented Aug 13, 2024

My thinking is other dependencies depending on @mui/material will hit the same issue we're seeing with emotion.

As soon as React releases a stable 19 version, it will satisfy the emotion peer dependency range and this error should disappear. If people want to play around with prereleases, they can just use the --force flag, no?

@aarongarciah
Copy link
Member Author

@Janpot yes, I think we don't have a choice 👍

@aarongarciah aarongarciah marked this pull request as ready for review August 15, 2024 12:13
Copy link
Member

@mnajdova mnajdova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚢 it.

Btw, we could update the installation docs once React 19 is stable with a note for the Emotion peer dependency & version compatibility problem.

@aarongarciah aarongarciah merged commit 4cfce2d into mui:next Aug 16, 2024
24 checks passed
@aarongarciah aarongarciah deleted the react-19-peer-dep branch August 16, 2024 07:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
core Infrastructure work going on behind the scenes dependencies Update of dependencies React 19 support PRs required to support React 19
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants